<template>
	<view class="myTeam">
		<view class="head">
			<view class="money_info">
				<view>
					当前佣金
					<view class="now_money">
						{{moneyInfo.brokerage}}
					</view>
				</view>
				<view class="share" @click="toShare">
					<image src="@/static/icon/share.png" mode="aspectFill"></image>
					分享
				</view>
			</view>
			<view class="earnings">
				<view class="earnings_item">
					<view class="earnings_money">
						{{moneyInfo.yesterday}}
					</view>
					昨日收益
				</view>
				<view class="earnings_item">
					<view class="earnings_money">
						{{moneyInfo.brokerage}}
					</view>
					积累收益
				</view>
			</view>
		</view>
		<view class="user_level">
			<view :class="userLevel==0?'selectLevel':''" @click="getUserList(0)">
				一级用户
			</view>
			<view :class="userLevel==1?'selectLevel':''" @click="getUserList(1)">
				二级用户
			</view>
		</view>
		<view class="user_list" v-if="userList.length>0">
			<view class="user_item" v-for="item in userList">
				<view class="user_info">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="name_phone">
						<view class="name">
							{{item.nickname}}
						</view>
						<view class="time">
							{{item.time}}
						</view>
					</view>
				</view>
				<view>
					<view>
						人数：{{item.childCount || 0}}
					</view>
					<view>
						订单：{{item.orderCount || 0}}
					</view>
					<view>
						金额：{{item.numberCount || 0}}
					</view>
				</view>
			</view>
		</view>
		<view v-else  class="empty" >
			暂无数据...
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				userLevel:0,
				page:0,
				limit:20,
				userList:[],
				moneyInfo:'',
				total:0
			}
		},
		onReachBottom() {
			if(this.total>(this.page+1)*this.limit){
				this.page += 1;
				// 显示加载提示框
				wx.showLoading({ title: '正在加载...' });
				// 加载更多数据
				this.getInitData();
			}
		},
		onShow() {
			this.userList = [];
			this.getInitData();
			this.$api.post({
				url: "/ebapi/user_api/balance_info",
				success: (res) => {
					this.moneyInfo = res;
					console.log(this.moneyInfo,"this.moneyInfo")
				},
			})
		},
		methods:{
			toShare(){
				uni.navigateTo({
					url:"/pages/my/share"
				})
			},
			getUserList(num){
				this.userLevel = num;
				this.page = 0;
				this.userList = [];
				this.getInitData();
			},
			getInitData(){
				let reqData = {
					grade:this.userLevel,
					page:this.page,
					limit:this.limit
				}
				this.$api.post({
				    url: "/ebapi/user_api/user_spread_new_list",
				    data: reqData,
				    success: (res) => {
						this.userList = this.userList.concat(res.list)
						this.total = res.total;
						if(this.limit>1){
							wx.hideLoading();
						}
						console.log(res,"res getInitData")
					},
				 })
			},
		}
	}
</script>

<style scoped lang="scss">
	page{
		padding: 0 !important;
	}
	.myTeam{
		.head{
			background: url('https://jyapi.rapidship.cn/public/teambg.png') no-repeat; 
			background-size: percentage; width: 100vw; position: relative; left: -23rpx;
			color: #fff; padding-bottom: 32rpx; border-radius: 0 0 32rpx 32rpx;
			.money_info{
				display: flex; justify-content: center;position: relative; padding: 80rpx 0;
				.share{
					display: flex; background: #FFFFFF; border-radius: 23rpx 0rpx 0rpx 23rpx; color: #2354E3; position: absolute; right: 0;
					width: 122rpx; height: 46rpx; justify-content: center; align-items: center;
					image{
						width: 26rpx; height: 26rpx;
					}
				}
				font-size: 26rpx; text-align: center;
				.now_money{
					font-size: 48rpx; margin-top: 30rpx;
				}
			}
			.earnings{
				display: flex; justify-content: space-around; position: relative;
				.earnings_item{
					text-align: center; max-width: 50%;
					.earnings_money{
						font-size: 32rpx; margin-bottom: 18rpx;
					}
				}
			}
			.earnings::after{
				content: ''; height: 100%; width: 1rpx; background: #FFFFFF; opacity: 0.3; position: absolute;
			}
		}
		.user_level{
			display: flex; justify-content: space-around; font-size: 24rpx; height: 80rpx; line-height: 80rpx; background: #FFFFFF; margin: 40rpx 0;
			.selectLevel{
				position: relative;
			}
			.selectLevel::after{
				content: ""; width: 80%; height: 4rpx; background-color: #2354E3; position: absolute; bottom: 10rpx; left: 10%;
			}
		}
		.user_level{
			display: flex; justify-content: space-around;
		}
		.user_list{
			padding:0 50rpx;
			.user_item{
				display: flex; justify-content: space-between; align-items: center; color: #999999; font-size: 22rpx; padding:35rpx 0 ;
				border-bottom: 1rpx solid #CCCCCC;
				.user_info{
					display: flex; align-items: center;
					image{
						width: 86rpx; height: 86rpx; margin-right:12rpx;
					}
					.name_phone{
						.name{
							font-size: 28rpx; font-weight: bold; margin-bottom: 12rpx;
						}
					}
				}
			}
		}
	}
</style>